<template>
	<view class="content">

		<!-- 美团顶部区域 -->
		<view class="home-top">
			<view>
				<u-row gutter="10">
					<u-col span="2">
						<span style="font-size: 16px;">南京</span>
					</u-col>
					<u-col span="8">
						<u-search placeholder="日照香炉生紫烟" v-model="keyword" :clearabled="true" :show-action="false"></u-search>
					</u-col>
					<u-col span="2">
						<img class="searchVoiceClass" src="@/static/images/home/searchVoice.png" alt="">
						<img class="searchVoiceClass" src="@/static/images/home/searchAdd.png" alt="">
					</u-col>
				</u-row>
			</view>
			<u-grid :col="4">
				<u-grid-item bg-color="#fff34a">
					<!-- <u-icon name="@/static/images/home/searchAdd.png" :size="46"></u-icon> -->
					<img class="grid-Img" src="@/static/images/home/扫码.png" alt="">
					<view class="grid-text">扫一扫</view>
				</u-grid-item>
				<u-grid-item bg-color="#fff34a">
					<img class="grid-Img" src="@/static/images/home/收款码.png" alt="">
					<view class="grid-text">付款码</view>
				</u-grid-item>
				<u-grid-item bg-color="#fff34a">
					<img class="grid-Img" src="@/static/images/home/骑行.png" alt="">
					<view class="grid-text">骑行</view>
				</u-grid-item>
				<u-grid-item bg-color="#fff34a">
					<img class="grid-Img" src="@/static/images/home/公交.png" alt="">
					<view class="grid-text">查公交</view>
				</u-grid-item>
			</u-grid>
		</view>
		<swiper class="swiper" @change="change">
			<swiper-item>
				<u-grid :col="5" @click="click" hover-class="hover-class">
					<u-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<img class="grid-Img" :src="item.url" alt="">
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :col="5" @click="click">
					<u-grid-item v-for="(item, index) in list" :index="index + 9" :key="index">
						<u-icon :name="item" :size="46"></u-icon>
						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid :col="5" @click="click">
					<u-grid-item v-for="(item, index) in list" :index="index + 18" :key="index">
						<u-icon :name="item" :size="46"></u-icon>
						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
		<!-- 商品区域 -->
		<view class="home-goods">
			<view class="home-goods-top">
				<img class="home-goods-top-img" src="@/static/images/home/购物袋.png" alt="">
				
				<span class="home-goods-top-tuijian">美团优选</span>
			</view>
			<view class="home-goods-box">
				<view class="home-goods-item" v-for="(item ,index) in goodList" :key="item.id">
					<img class="home-goods-item-img" :src="item.url" alt="">
					<span class="home-goods-item-price">1元</span>
				</view>

			</view>

		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '工具',
				tabbar: '',
				scrollTop: 0,
				keyword: '搜索内容',
				type: 'text',
				current: 0,
				list: [{
						id: 0,
						url: require('@/static/images/home/外卖.png'),
						name: '外卖',
					},
					{
						id: 0,
						url: require('@/static/images/home/美食.png'),
						name: '美食',
					},
					{
						id: 0,
						url: require('@/static/images/home/酒店.png'),
						name: '酒店',
					},
					{
						id: 0,
						url: require('@/static/images/home/娱乐.png'),
						name: '娱乐',
					},
					{
						id: 0,
						url: require('@/static/images/home/电影.png'),
						name: '电影',
					},
					{
						id: 0,
						url: require('@/static/images/home/景点.png'),
						name: '景点',
					},
					{
						id: 0,
						url: require('@/static/images/home/超市.png'),
						name: '超市',
					},
					{
						id: 0,
						url: require('@/static/images/home/火车票.png'),
						name: '火车票',
					},
					{
						id: 0,
						url: require('@/static/images/home/买药.png'),
						name: '买药',
					},
					{
						id: 0,
						url: require('@/static/images/home/旅游.png'),
						name: '旅游',
					},

				],
				goodList: [{
						id: 0,
						url: require('@/static/images/home/goodList/good1.png'),
						name: '',
						price: '18.9'
					},
					{
						id: 0,
						url: require('@/static/images/home/goodList/good2.png'),
						name: '',
						price: '18.9'
					},
					{
						id: 0,
						url: require('@/static/images/home/goodList/good3.png'),
						name: '',
						price: '18.9'
					},
					{
						id: 0,
						url: require('@/static/images/home/goodList/good7.png'),
						name: '',
						price: '18.9'
					},
					{
						id: 0,
						url: require('@/static/images/home/goodList/good5.png'),
						name: '',
						price: '18.9'
					},
					{
						id: 0,
						url: require('@/static/images/home/goodList/good6.png'),
						name: '',
						price: '18.9'
					},


				]
			}
		},
		onLoad() {
			this.tabbar = this.$store.getters.tabbarList;
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.wrap {
		height: 200vh;
	}

	.searchVoiceClass {
		height: 20px;
		width: 15px;
		margin: 5px;
	}

	.home-top {
		height: 100px;
		background-color: #fff34a;
	}


	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.swiper {
		height: 400rpx;
	}

	.home-goods {
		height: 400rpx;
		background-color: #fffa54;
	}

	.home-goods-top {
		height: 100rpx;
		background-color: red;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to bottom right, #F9D949, #FCFBAA);
	}

	.home-goods-box {
		height: 650rpx;
		padding: 10rpx;
		background-color: red;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to bottom right, #F9D949, #FCFBAA);
		display: flex;
		flex-wrap: wrap;
	}

	.home-goods-item {
		height: 220rpx;
		width: 220rpx;
		background-color: #ffffff;
		text-align: center;
		margin: 10rpx;
	}

	.home-goods-item-img {
		height: 170rpx;
		width: 100%;
	}

	.home-goods-item-price {
		text-align: center;
		color: #FF6100;
	}

	.grid-Img {
		height: 50rpx;
	}
	.home-goods-top-img{
		height: 80rpx;
		width: 80rpx;
		display: inline-block;
	}
	.home-goods-top-tuijian{
		display: inline-block;
	font-size: 30rpx;
	font-weight: bold;
		}
		
</style>
